<template>
  <div>
    <!-- 御剑乘风来,除魔天地间!
    <br />
    <router-view></router-view> -->
    <ul>
      <li><router-link to="/Tiao/这是第一个">一号位</router-link></li>
      <li>
        <router-link to="/Tiao/这是第二个">二号位</router-link>
      </li>
      <li>
        <router-link to="/Tiao/这是第三个">三号位</router-link>
      </li>
    </ul>
    <br />
    <button @click="fn">这是一个跳转按钮</button>
    <hr />
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    fn () {
      // 通过路径跳转
      // this.$router.push('/Tiao/这是第一个')
      // this.$router.push({
      //   path: '/Tiao/这是第二个'
      // })
      //通过属性名跳转
      this.$router.push({
        name: "Yi1"
      })
    }
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
}
li {
  width: 50px;
  height: 50px;
  margin: 20px;
  background-color: yellow;
  .router-link-exact-active {
    background-color: red;
  }
}
</style>
